<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态绑定class</title>
		<style type="text/css">
			.red{  
				color: red;
			}
			.italic{
				font-style: italic;
			}
			.bor{
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		
		<div id="app">
			<h2 class="red italic">普通class</h2>
			<!-- 动态绑定class，使用数组来罗列多个绑定的类名 -->
			<h2 :class="['red','italic']">使用数组</h2>
			<!-- 数组对象语法 -->
			<h2 :class="['red',{'italic':flag}]">数组中使用对象代替三元表达式</h2>
			<h2 :class="[flag ? 'italic' : 'red']">数组中使用三元表达式</h2>
			
			<h2 :class="classobj">使用对象</h2>
			<!-- v-bind:class指令可以与普通class共存 -->
			<h3 :class="{bor:true,italic:flag}">对象语法</h3>
		</div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					flag:true,
					classobj:{
						red:true,
						italic:true,
						bor:false
					}
				}
			})
		</script>
	</body>
</html>
